<template>
	<!-- 菜单界面 -->
	<div class="container">
		<el-page-header @back="$router.go(-1)" content="">
		</el-page-header>
		<!-- 动画区域 -->
		<div class="div2">
			<div class="div3">
				<!-- 主体区域 -->
				<div class="view">
				<div class="cmain">
						<p v-for="(item,index) in list3" @click= "handelClick(item.name)" :key="index">{{item.name}}</p>
				</div>
				</div>
			</div>
		</div>
		<div class="div1">
			   <p v-show="show" class="title2">{{typer2}}</p>
		</div>
		<p class="title1">{{typer1}}</p>
	</div>
</template>

<script>
// 导入请求数据的 baseurl
import baseUrl from '@/utils/urlconfig'
export default {
  data () {
	  return {
		  show: true,
		  list3: null,
		  typer1: '',
		  typer2: ''
	  }
  },
  methods: {
    // async handelClick (name) {
    async handelClick (name) {
      // console.log(name)
	  // var url = baseUrl + '/menu/menu_detail/?kw=' + name
	  // const { data: res } = await this.$http.get(url)
	  // if (res.message === 'OK') {
		  // localStorage.removeItem('goodsList')
		  // console.log(res.data)
		  // localStorage.setItem('goodsList', JSON.stringify(res.data.first_title))
		  this.$router.push({
		    path: '/tuijian',
		  	name: 'tuijian',
			query: {
				kw:name
			},
		    // params: { menuList: res.data.first_title }
		  })
    },
    animation () {
      var div2 = document.querySelector('.div2')
	  var html = document.querySelector('html')
	  var rootSize = parseInt(html.style.fontSize)
	  var size = rootSize * 1180 / 160
      var test2 = setInterval(function () {
      // your codes
        div2.style.width = div2.offsetWidth + 20 + 'px'
      }, 20)
      setTimeout(function () {
        clearInterval(test2)
      }, size)
    }
  },
  mounted () {
    this.animation()
  },
  created () {
	  var menuList = this.$route.params.menuList
	  var title1 = this.$route.query.title1
	  var title2 = this.$route.query.title2
	  if (menuList === undefined) {
	  		  var menu2 = JSON.parse(localStorage.getItem('menu2'))
	  		  this.typer1 = menu2.title1
	  		  this.typer2 = menu2.title2
	  		  this.list3 = menu2.menuList
	  } else {
	  		  this.typer1 = title1
	  		  this.typer2 = title2
	  		  this.list3 = menuList
	  }
  }
}
</script>

<style scoped>
	@import url("../assets/css/common.css");
	p{
		margin: 0;
		padding: 0;
		font-family: "楷体" !important;
	}
	.container {
		position: absolute;
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background: url(../assets/images/goods_bg1.png);
		background-size: 100% 100%;
		border: 1px solid #797979;
	}
	.title1{
	    position: absolute;
		top: 1.7125rem;
		left: 8.3675rem;
		width: 0.45rem;
		height: 2.525rem;
		font-size: 0.45rem;
		text-wrap: wrap;
		text-shadow: 0px 0px 2px #ffffff;
		color: #A8482C;
	}
	.title2{
	    position: absolute;
		top: 0.9375rem;
		left: 0;
		width: 0.45rem;
		height: 2.525rem;
		font-size: 0.45rem;
		text-wrap: wrap;
		text-shadow: 0px 0px 2px #ffffff;
		color: #A8482C;
	}
	/* 动画区域 */
	.div1,
	.div2,
	.div3 {
		float: right;
		height: 4.5rem;
	}

	.div1 {
		position: relative;
		margin-top: 75px;
		width: 0.475rem;
		background: url(../assets/images/卷轴1.png) no-repeat;
		background-size: 0.475rem;
	}

	.div2 {
		width: 1.01875rem;
		position: relative;
		overflow: hidden;
	}

	.div3 {
		width: 10rem;
		background: url(../assets/images/卷轴.png);
		background-size: 1600px;
		position: absolute;
		right: 100px;
		top: 75px;
		text-align: center;
	}
	/* 主要内容区域 */
	.view{
		position: absolute;
		width: 6rem;
		height: 2.775rem;
		top: 0.75rem;
		right: 1.34375rem;
		overflow: auto;
	}
	.cmain{
		width: 25rem;
		height: 2.775rem;
		/* background-color: pink; */
	}
	.cmain p{
		float: left;
		width: 1rem;
		height: 100%;
		font-size: 0.475rem;
		text-wrap: wrap;
		padding: 0.25rem;
		border-left: 2px solid #797979;
		cursor: pointer;
	}
	.cmain p:last-child{
		border-right: 2px solid #797979;
	}
</style>
